<script lang="ts" setup>
    import { ref, reactive, onMounted,watch,PropType } from 'vue';
    import { IconPlus } from '@arco-design/web-vue/es/icon';
    import IndexGraph from './IndexGraph/index'
    import IndexTreeList from '../components/IndexTreeList/index.vue'
    import { nanoid } from 'nanoid';
    import _ from 'lodash'
    import Bus from '@/utils/emmit'
    import { useRoute, useRouter } from 'vue-router';
    import API from '@/services';
    import resetGraphIcon from '@/assets/images/reset_graph_icon.svg';
    import {removeAllChildDom} from '@/utils/util'
    const route = useRoute();
    let id = ref(route.query.id);
    const emit = defineEmits(['addIndexCard', 'addSymbolCard', 'removeMainCard', 'firstMetricsCard'])
    const loading = ref<boolean>(false)
    const indexTreedata = ref()
    const onlyMainCard = ref<boolean>(false)
    const getDetailMetricsGraph = ref<any>()

    const indexGrapRef = ref()

    const props = defineProps({
        showMainGraph: {
            type: Boolean,
            default: false
        },
        firstMetricsData: {
            type: Object as PropType<any>,
        }
    })

    const addFirstMetricsCard = (v:any) => {
        // v.id=nanoid(10)
        const domDelBtn :any  = document.getElementsByClassName('init-add-card')
        // removeAllChildDom(domDelBtn)
        domDelBtn[0].remove()
         const cloneData = _.cloneDeep(v)
        cloneData.id = nanoid(10)

        emit('firstMetricsCard', cloneData)
    }
    const onAddIndexCard = (data:any) => {
        emit('addIndexCard', data)
    }
    const onRemoveEvent = (data:any, deleteAfterData:any, isMainCard:boolean) => {
        if (isMainCard) {
            indexTreedata.value = undefined
            onlyMainCard.value = false
        }
        emit('removeMainCard',isMainCard, data, deleteAfterData)
    }
    
    const replaceAllNode = (data:any, replaceData:any) => {
        const {children} = data
        if (data.type === 'indexCard') {
            const findReplaceItem = replaceData.find((item:any) => item.keys === data.keys)
            data.value = findReplaceItem.value
            data.dateTime = findReplaceItem.dateTime
            data.dateCondition = findReplaceItem.dateCondition
            data.rootTreeCard = false
            data.heightLightLine = false
        }
        if (children?.length) {
            for (let i = 0, len = children.length; i < len; i++) {
            replaceAllNode(children[i], replaceData)
            }
        }
        return data
    }
    // 获取指标树编辑状态的数据
    const getEditIndexData = async (boardId:number) => {
        try {
            const {code, data} = await API.metricsTree.getByBoardId({boardId})
            if (code === 200) { 
                getDetailMetricsGraph.value = data

                indexTreedata.value = JSON.parse(getDetailMetricsGraph.value.graph)

                indexTreedata.value = replaceAllNode(indexTreedata.value, getDetailMetricsGraph.value.cards)
                console.log('编辑状态指标树全局替换数据', indexTreedata.value)
                
                indexTreedata.value.rootTreeCard = true // 主卡添加蓝条
                indexTreedata.value.heightLightLine = true // 进来时默认选中主卡高亮
                Bus.emit('getEditMetricTreeData', getDetailMetricsGraph.value.cards, indexTreedata.value, getDetailMetricsGraph.value.id)
                
            }
        } catch (error) {}
    }

    // 重置画布回到画布中心
    const onRestEvent = () => {
        Bus.emit('onRestEvent')
    }
    onMounted(() => {
        if (id.value) {
            onlyMainCard.value = true
            getEditIndexData(Number(id.value))
        }
    })
    watch(
        () => props.showMainGraph,
        (val) => {
            onlyMainCard.value = val
        }
    )
    watch(
        () => props.firstMetricsData,
        (val) => {
            indexTreedata.value = Object.assign({}, val)
        }
    )

</script>
<template>
    <div>
        <div :class="['metrics-graph-content', {overflow: !onlyMainCard}]">
                <div v-if="!onlyMainCard" class="init-card">
                    <a-popover position="rt" 
                        trigger="click"
                        :content-style="{width: '210px', padding: '0'}"
                        content-class='init-add-card-content'
                        class="init-add-card"
                    >
                         <div class="addMainIndex">
                            <div class="top-border"></div>
                            <div class="add-index-card">
                            <icon-plus class="addIcon"/>
                            <span class="index-text">点击配置主指标</span>
                            </div>
                        </div>
                        <template #content>
                            <index-tree-list
                                :groupId="undefined"
                                @handleIndex="addFirstMetricsCard"
                            ></index-tree-list>
                        </template>
                    </a-popover>
                </div>

                <div
                    v-else
                    class="graphResetIcon"
                    @click="onRestEvent"
                >
                <a-tooltip content="复位">
                    <img :src="resetGraphIcon" />
                </a-tooltip>
                </div>
                <IndexGraph
                    v-show="onlyMainCard"
                    ref="indexGrapRef"
                    class="graphWrapper"
                    style="flex: 1"
                    :treedata="indexTreedata"
                    :add-index-card="onAddIndexCard"
                    @removeEvent="onRemoveEvent"
                />

        </div>
    </div>
</template>
<style> 
    .metrics-graph-content .x6-graph.x6-graph-pannable {
        width: 100% !important;
        height: 100% !important;
    }
</style>
<style lang="scss" scoped>
    @import './index.scss'
</style>

